<template>
  <div>
   <div class="box">
     <div class="left"><van-icon color="#fff" name="arrow-left" @click="back" /></div>
    <div class="title">收藏列表</div>
    <div class="right"></div>
   </div>
  <comm v-for="item in collectList" :key="item.houseCode">
    <template #house-left>
      <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="">
    </template>
    <template #house-right>
         <h3>{{item.title}}</h3>
    <div class="house-ms">{{item.desc}}</div>
    <div class="house-tag">{{item.tags[0]}}</div>
    <div class="price">
     <span>{{item.price}}</span>元/月
          </div>
    </template>
    </comm>
  </div>
</template>

<script>
import request from '../utils/request'
import comm from '../components/Mycomm.vue'
export default {
  name: 'haokeCollect',

  data () {
    return {
      collectList: []
    }
  },
  components: {
    comm
  },
  mounted () {

  },
  created () {
    this.getData()
  },

  methods: {
    async  getData () {
      try {
        const res = await request({
          url: '/user/favorites',
          method: 'get'
        })
        console.log(res)
        this.collectList = res.body
      } catch (e) {
        console.log(e)
      }
    },
    back () {
      this.$router.push('/layout/user')
    }
  }
}
</script>

<style lang=less scoped>
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 45px;
  background-color: #21b97a;
}
.title{
  font-size: 19px;
  color:#fff
}
.left{
  transform: translateX(15px);
}
</style>
